import React from 'react';
import { Form, Input, Button, Space } from 'antd';

const WebsiteForm = ({ initialValues, onSubmit, onCancel, loading = false }) => {
  const [form] = Form.useForm();

  const handleSubmit = (values) => {
    onSubmit(values);
  };

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={initialValues}
      onFinish={handleSubmit}
      style={{ animation: 'fadeIn 0.3s ease-in-out' }}
    >
      <Form.Item
        label="网站名称"
        name="name"
        rules={[{ required: true, message: '请输入网站名称' }]}
      >
        <Input placeholder="例如：豆瓣电影" />
      </Form.Item>

      <Form.Item
        label="网站地址"
        name="url"
        rules={[
          { required: true, message: '请输入网站地址' },
          { type: 'url', message: '请输入有效的URL地址' }
        ]}
      >
        <Input placeholder="例如：https://movie.douban.com" />
      </Form.Item>

      <Form.Item
        label="搜索地址"
        name="searchUrl"
        rules={[
          { required: true, message: '请输入搜索地址' },
          { type: 'url', message: '请输入有效的URL地址' },
          {
            validator: (_, value) => {
              if (value && !value.includes('{keyword}')) {
                return Promise.reject(new Error('搜索地址必须包含 {keyword} 占位符'));
              }
              return Promise.resolve();
            }
          }
        ]}
        extra="搜索地址必须包含 {keyword} 占位符，用于替换搜索关键词"
      >
        <Input placeholder="例如：https://movie.douban.com/subject_search?search_text={keyword}" />
      </Form.Item>

      <Form.Item
        label="图标URL"
        name="icon"
        rules={[
          { required: true, message: '请输入图标URL' },
          { type: 'url', message: '请输入有效的URL地址' }
        ]}
      >
        <Input placeholder="例如：https://img3.doubanio.com/favicon.ico" />
      </Form.Item>

      <Form.Item>
        <Space>
          <Button 
            type="primary" 
            htmlType="submit" 
            loading={loading}
            style={{ 
              transform: loading ? 'scale(0.95)' : 'scale(1)',
              transition: 'transform 0.1s ease-in-out'
            }}
          >
            {initialValues ? '更新' : '添加'}
          </Button>
          <Button onClick={onCancel}>
            取消
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default WebsiteForm;